﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo showcases the 64-bit number support of jqxGauge and
        how to change the decimal notation of its labels.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#gaugeContainer').jqxGauge({
                int64: true,
                width: 500,
                height: 500,
                startAngle: 40,
                endAngle: 300,
                ranges: [{ startValue: '0', endValue: '250000000000000', style: { fill: '#CCCCE6', stroke: '#B2B2D9' }, endWidth: 5, startWidth: 1 },
                            { startValue: '250000000000000', endValue: '500000000000000', style: { fill: '#9999CC', stroke: '#8080C0' }, endWidth: 10, startWidth: 5 },
                            { startValue: '500000000000000', endValue: '750000000000000', style: { fill: '#6666B3', stroke: '#4D4DA6' }, endWidth: 15, startWidth: 10 },
                            { startValue: '750000000000000', endValue: '1000000000000000', style: { fill: '#333399', stroke: '#19198D' }, endWidth: 20, startWidth: 15}],
                ticksMinor: { interval: '50000000000000', size: '5%' },
                ticksMajor: { interval: '250000000000000', size: '9%' },
                labels: {
                    interval: '100000000000000',
                    formatValue: function (value) {
                        return value;
                    }
                },
                cap: { style: { fill: '#333399', stroke: '#19198D'} },
                pointer: { style: { fill: '#333399', stroke: '#19198D'} },
                min: '0',
                max: '1000000000000000',
                value: '0',
                colorScheme: 'scheme03',
                animationDuration: 1200
            });

            $('#gaugeContainer').jqxGauge({ value: '300000000000000' });

            $('#decimal').jqxRadioButton({ checked: true });
            $('#exponential, #scientific, #engineering').jqxRadioButton();

            $('#decimal, #exponential, #scientific, #engineering').on('change', function (event) {
                var checked = event.args.checked;
                if (checked === true) {
                    $('#gaugeContainer').jqxGauge({
                        labels: {
                            interval: '100000000000000',
                            formatValue: function (value) {
                                var formattedValue = new $.jqx.math().getDecimalNotation(value, event.target.id);
                                return formattedValue;
                            }
                        }
                    });
                }
            });
        });
    </script>
</head>
<body style="background: white;">
    <div id="gaugeContainer" style="float: left;">
    </div>
    <div style="float: left;">
        <div style="font-size: small; font-family: Verdana;">
            Labels notation:</div>
        <div style="margin-top: 5px;" id="decimal">
            Decimal notation</div>
        <div style="margin-top: 2px;" id="exponential">
            Exponential notation</div>
        <div style="margin-top: 2px;" id="scientific">
            Scientific notation</div>
        <div style="margin-top: 2px;" id="engineering">
            Engineering notation</div>
    </div>
</body>
</html>
